<template>
  <div class="QuickTagPlain__container">
    <p class="content" :class="getColorRight">
      <span class="qly-tag__left" :class="getColor">{{ label }}</span>
      <span class="qly-tag__right">{{ value ? value : "无" }}</span>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "blue",
    },
    label: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
  },
  computed: {
    getColor() {
      switch (this.type) {
        case "blue":
          return "q-tag-value-bg-blue";
        case "blue-2":
          return "q-tag-value-bg-blue-2";
        case "yellow":
          return "q-tag-value-bg-yellow";
        case "yellow-2":
          return "q-tag-value-bg-yellow-2";
        case "green":
          return "q-tag-value-bg-green";
        case "green-2":
          return "q-tag-value-bg-green-2";
        case "green-3":
          return "q-tag-value-bg-green-3";
        case "green-4":
          return "q-tag-value-bg-green-4";
        default:
          return "q-tag-value-bg-green";
      }
    },
    getColorRight() {
      switch (this.type) {
        case "blue":
          return "q-tag-value-blue";
        case "blue-2":
          return "q-tag-value-blue-2";
        case "yellow":
          return "q-tag-value-yellow";
        case "yellow-2":
          return "q-tag-value-yellow-2";
        case "green":
          return "q-tag-value-green";
        case "green-2":
          return "q-tag-value-green-2";
        case "green-3":
          return "q-tag-value-green-3";
        case "green-4":
          return "q-tag-value-green-4";
        default:
          return "q-tag-value-green";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.QuickTagPlain__container {
  display: inline-block;

  .content {
    font-size: 1.2rem;
    line-height: 1.2rem;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid;
    margin-right: 5px;
  }

  .qly-tag__left {
    display: inline-block;
    background: #e1251b;
    color: white;
    padding: 3px 5px;
  }

  .qly-tag__right {
    display: inline-block;
    background: white;
    padding: 3px 5px;
  }

  .q-tag-value-bg-green {
    background: #4bca2a;
    border-color: #4bca2a;
  }

  .q-tag-value-green {
    color: #4bca2a;
  }

  .q-tag-value-bg-green-2 {
    background: #89b702;
    border-color: #89b702;
  }

  .q-tag-value-green-2 {
    color: #89b702;
  }

  .q-tag-value-bg-green-3 {
    background: #45d298;
    border-color: #45d298;
  }

  .q-tag-value-bg-green-3 {
    color: #45d298;
  }

  .q-tag-value-bg-green-4 {
    background: #21b598;
    border-color: #21b598;
  }

  .q-tag-value-green-4 {
    color: #21b598;
  }

  .q-tag-value-bg-yellow {
    background: #e05d44;
    border-color: #e05d44;
  }

  .q-tag-value-yellow {
    color: #e05d44;
  }

  .q-tag-value-bg-yellow-2 {
    background: #ead793;
    border-color: #ead793;
  }

  .q-tag-value-yellow-2 {
    color: #ead793;
  }

  .q-tag-value-bg-blue {
    background: #007ec6;
    border-color: #007ec6;
  }

  .q-tag-value-blue {
    color: #007ec6;
  }

  .q-tag-value-bg-blue-2 {
    background: #409eff;
    border-color: #409eff;
  }

  .q-tag-value-blue-2 {
    color: #409eff;
  }
}
</style>